<template>
    <div class="pug-tagbox" :style="{ left: $store.state.menu.slideWidth }">
        <el-tabs v-model="activeTab" type="card" @tab-remove="removeTab" @tab-change="changeTab"
            style="max-width: 100%;">
            <el-tab-pane v-for="item in editableTabs" :key="item.path" :label="item.title" :closable="item.path != '/'"
                :name="item.path">
            </el-tab-pane>
        </el-tabs>
        <span class="pug-tab-dropdown">
            <el-dropdown @command="handlerClose">
                <span class="el-dropdown-link">
                    <el-icon>
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="closeOther">关闭其他</el-dropdown-item>
                        <el-dropdown-item command="closeAll">全部关闭</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </span>
    </div>
</template>
<script setup>
import {usePugTagList} from '@/api/PugTagList'
const {
    changeTab,
    handlerClose,
    removeTab,
    editableTabs,
    activeTab
} = usePugTagList();


</script>

<style>
.pug-tagbox {
    @apply  flex fixed text-center px-2;
    height: 38px;
    right: 0;
    top:55px;
    background:#fff;
}


.pug-tab-dropdown {
    @apply bg-white rounded ml-auto flex items-center justify-center px-2;
    height: 32px;
}

.pug-tagbox .el-tabs__header {
    margin-bottom: 0 !important;
    border: 0 !important;
}

.pug-tagbox  .el-tabs__nav {
    border: 0 !important;
}

.pug-tagbox  .el-tabs__item {
    border: 0 !important;
    background: #eee;
    margin: 0 2px;
    height: 32px;
    line-height: 32px;
    border-radius: 8px;
}

.pug-tagbox  .el-tabs__nav-next,
.pug-tagbox  .el-tabs__nav-prev {
    line-height: 32px !important;
}

.pug-tagbox  .is-disabled {
    cursor: not-allowed;
    color: #999 !important;
    ;
}
</style>
